<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <meta name="keywords" content="網頁設計,平面設計,插畫" />
        <meta name="description" content="DFUNS個人網站與美工網頁設計教學,CSS,FLASH" />
        <meta name="copyright" content="本網頁著作權 DFUNS 2000-2010 All Rights Reserved."/>
        <meta name="author" content="DFUNS by Away" />
        <title>=DFUNS™= CSS語法教學-滑入顯示說明文字</title>

        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            body {
                font: 12px Arial, Helvetica, sans-serif;
                margin-bottom:20px;
            }

            /*第一組=====================================================*/
            #box1 {
                width: 525px;
                height: 20px;
                margin: 20px auto 20px auto;
                position: relative;
            }
            .menuLink1 li {
                color: #FFF;
                text-align: center;
                text-decoration: none;
                background-color: #036;
                width: 100px;
                /*width: 80px;*/
                height: 18px;
                float: left;
                padding-top: 2px;
                margin-right: 5px;
                list-style-type: none;
                cursor: default;
                /*border: 1px red solid;*/
            }
            .menuLink1 li:hover {
                color:#333;
                background-color:#69F;
                /*background-color: red;*/
            }
            .menuLink1 li span {
                display: none;
            }
            .menuLink1 li:hover span {
                color: #333;
                background-color: #69F;
                text-align: left;
                display: block;
                height: 80px;
                width: 500px;
                padding:10px;
                position: absolute;
                top: 20px;
                left: 0px;
                cursor: text;
            }


            /*第二組=====================================================*/
            #box2 {
                width: 525px;
                height: 20px;
                margin: 20px auto 20px auto;
                position: relative;
            }
            .menuLink2 li {
                list-style-type: none;
                width: 100px;
                float: left;
                margin-right:5px
            }
            .menuLink2 li a {
                color:#333;
                text-align: center;
                display:block;
                text-decoration: none;
                background-color:#FC0;
                width: 100px;
                height: 18px;
                padding-top: 2px;
            }

            .menuLink2 li a:hover {
                color:#FFF;
                background-color:#F90;
            }
            .menuLink2 li a span {
                display: none;
            }
            .menuLink2 li a:hover span {
                color:#FFF;
                background-color:#F90;
                text-align: left;
                display: block;
                height: 80px;
                width: 500px;
                padding:10px;
                position: absolute;
                top: 20px;
                left: 0px;
                cursor:text;
            }
            .tips {
                font:bold 1.2em Arial, Helvetica, sans-serif;
                text-align: center;
                height: 25px;
                width: 400px;
                clear: both;
                padding-top: 10px;
                margin: 120px auto 80px auto;
                border: 1px dotted #999;
            }
            #footer {
                width: 730px;
                margin:0px auto;
                border: 1px solid #CCC;
                text-align: center;
                padding: 10px;
                height: 45px;
            }
            #footer h1 {font-size: 2em;}
        </style>
    </head>

    <body>
        <div id="box1">
            <ul class="menuLink1">
                <li>PhotoShop<span>顏色是影像的靈魂，本課程將告訴你如何控制明暗、彩度與對比，讓影像瞬間大變身！同時，Photoshop CS4的新功能讓許多玩家眼睛為之一亮，本課程將用循序漸進、化繁為簡的方式介紹Photoshop，讓您輕鬆學會影像設計。</span></li>
                <li>Illustrator<span>Illustrator CS4是一套功能強大的繪圖軟體，適合應用在創造性的設計工作，其出眾的創作和圖像處理能力，給予了設計者無窮的創造力。不論是印刷輸出、網頁內容、視訊剪輯等圖像需求，都可以快速的設計繪製；此外，更可與其他CS4的軟體相互搭配，幫助設計工作者迅速整合各類圖像內容，提昇設計整合的效率。</span></li>
                <li>InDesign<span>在新的排版趨勢中，數位出版品佔著極具份量的角色，InDesign不只是個平面排版軟體而已，它具備的跨平台特色，讓它在排版界具有舉足輕重的地位。無論是製作技術手冊、報章雜誌、通訊錄、產品型錄、書籍等等，Indesign通通都可以輕鬆搞定！面對數位化、圖像化、電子化的時代來臨，Indesign已是設計人員必備的技能之一。 </span></li>
                <li>Painter<span>在眾多電腦繪圖軟體中，Painter總是最能夠讓使用者揮灑創意。本課程將帶你了解Painter中強大的筆刷筆法與素材的設定，以圖像處理與色彩的交互運用，使作品活靈活現。課程中也將讓你認識影像的處理與繪製，輕輕鬆鬆彩繪創意！ </span></li>
                <li>CorelDRAW<span>本課程教您做出千變萬化的圖形特效，藉由點的編修、線的連接、面的建構，並運用繪圖的基本概念與CorelDRAW各項功能進行繪製及教學，過程中也將讓你了解點陣圖與向量物件的差異，並讓你掌握圖文整合的各種版型設計技巧！ </span></li>
            </ul>
        </div>
        <div class="tips">適用於IE7、IE8、FireFox、Chrome</div>

        <div id="box2">
            <ul class="menuLink2">
                <li><a href="#">Dreamweaver<span>Dreamweaver是現今製作網頁最佳的利器，本課程配合實際範例操作，將會引導你學會將靜態網頁搖身變成有動態效果的網頁。除了學習各種行為的使用技巧，還能靈活運用AP Div元素與行為特效的完美搭配，並以CSS樣式設計整頁版型、結合Spry架構功能與XML資料，讓你建立豐富內容、編排美觀而令人為之一亮的網頁！</span></a></li>
                <li><a href="#">Flash<span>Flash 是成為一個專業的網頁設計者必修課程，因為它的超強功能與強大應用，目前仍是網頁動畫設計領域的第一把交椅。本課程將針對Adobe Flash CS4動畫設計提供完整教學，讓您上完本課程後，除了可獲得軟體操作的基本能力外，並了解動畫製作的方式及技巧。</span></a></li>
                <li><a href="#">Fireworks<span>Fireworks是兼具影像處理、圖形設計及動畫編製的專業美工軟體，它除了能夠產生網頁所需的影像、按鈕等網頁所需的基本元件之外，並可以和Adobe Flash、Dreamweaver 等系列產品做一完美搭配，達到專業快速及分工整合的極致效果喔！</span></a></li>
                <li><a href="#">SharePoint<span>Microsoft Office SharePoint Designer 2007 是一套全新的產品，可用來建立及自訂 SharePoint 網站，並可輕鬆架構出組織成員的工作流程Web應用程式。不儘如此，它還提供多種專業工具，可在 SharePoint 平台上建置互動式解決方案而不需撰寫程式碼、設計美觀的 SharePoint 網站，並可透過報表與不同的管理權限來提高網站管理的效能。</span></a></li>
                <li><a href="#">After Effects<span>想要製作出超Cool的視覺特效和引人入勝的動態影像嗎？After Effects將會是你的最佳選擇！本課程將讓你了解動畫與動畫製作、動作合成、文字工具、程式化動畫、基本特效等原理。針對剛接觸After Effects的你，本課程將以業界常用的標準流程來進行全面的觀念說明，讓你可以在此入門課程中，了解每個專案連結的種種功能細節。</span></a></li>
            </ul>
        </div>
        <div class="tips">適用於IE6、E7、IE8、FireFox、Chrome</div>
        <div id="footer">
            <h1>CSS語法教學 │滑入顯示說明文字│</h1>
            <p>DFUNS教學網範例 = <a href="http://www.dfuns.idv.tw">http://www.dfuns.idv.tw</a> =</p>
        </div>
    </body>
</html>
